<template>
  <div class="">
    <div class="filter_con ds_block">
      <div class="button_area"><el-button v-has size="medium" type="primary" @click="add">新增客服</el-button></div>
    </div>
    <div class="">
      <el-table :data="list">
        <el-table-column prop="name" label="客服名称"></el-table-column>
        <el-table-column prop="url" label="客服链接"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="EditHandle(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="handleClose(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <!--  <el-button size="medium">批量删除
        </el-button>-->
        <el-pagination
          @current-change="ChangeCurrent"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          :page-count="page"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
    <el-dialog append-to-body :visible.sync="innerVisible" width="500px">
      <el-form ref="userForm" :model="forms" :rules="userRules" :label-position="labelPosition" label-width="100px">
        <el-form-item label="客服名称" prop="name"><el-input v-model="forms.name" placeholder="请输入客服名称"></el-input></el-form-item>
        <el-form-item label="客服链接" prop="url"><el-input v-model="forms.url" placeholder="请输入客服链接"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" v-if="forms.id" @click="editSave">确定</el-button>
        <el-button type="primary" v-else @click="addSave">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getwxcompanycustomer, savewxcustomer,editwxcustomer,deladwxcustomer} from '@/api/mall/customer';

export default {
  data() {
    return {
      innerVisible: false,
      forms: {
        name: '',
        url: ''
      },
      list: [],
      page:1,
      size:10,
      total: 0,
      labelPosition: 'left',
      userRules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入客服名称'
          }
        ],

        url: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入客服链接'
          }
        ]
      }
    };
  },
  props: {
    uid: {
      type: Number,
      default: -1
    }
  },
  watch: {
    uid() {
      this.getlist();
    }
  },
  mounted() {
    if (this.uid) {
      this.getlist();
    }
    // this.getlist()
  },
  methods: {
    getlist() {
      let data = {
        page: this.page,
        id: this.uid
      };
      getwxcompanycustomer(data).then(res => {
        var jsondata = res.msg;
        this.list = jsondata;
        // this.total = jsondata.total;
      });
    },
    add() {
      this.innerVisible = true;
    },
    EditHandle(data) {
      this.forms = {
        name: data.name,
        url: data.url,
        id:data.id
      };
      this.innerVisible = true;
    },
    addSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          var data = _this.forms;
          data.company_id = this.uid;
          savewxcustomer(data).then(res => {
            _this.getlist();
            _this.innerVisible = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          var data = _this.forms;
          data.company_id = this.uid;
          editwxcustomer(data).then(res => {
            _this.getlist();
            _this.innerVisible = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除
    handleClose(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {
            id: id
          };
          deladwxcustomer(data).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.getlist();
    }
  }
};
</script>

<style></style>
